<template>
    <div class="class-select-wrapper">
        <a-input v-model:value="selectedClass" disabled />
        <a-button type="link" @click="showModal">
            请选择班级
        </a-button>
    </div>

    <!-- 班级选择弹窗 -->
    <a-modal v-model:open="visible" title="选择班级" @ok="handleOk">
        <a-form layout="vertical">
            <a-form-item label="年级">
                <a-select v-model:value="selectedGrade" placeholder="请选择年级">
                    <a-select-option v-for="grade in grades" :key="grade" :value="grade.dictLabel">
                        {{ grade.dictLabel }}
                    </a-select-option>
                </a-select>
            </a-form-item>

            <a-form-item label="专业">
                <a-select v-model:value="selectedMajor" placeholder="请选择专业">
                    <a-select-option v-for="major in majors" :key="major" :value="major.name">
                        {{ major.name }}
                    </a-select-option>
                </a-select>
            </a-form-item>

            <a-form-item label="班级">
                <a-select v-model:value="selectedClassNum" placeholder="请选择班级">
                    <a-select-option v-for="classItem in classes" :key="classItem" :value="classItem.dictLabel">
                        {{ classItem.dictLabel }}
                    </a-select-option>
                </a-select>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { getStuGrade_api, getStuClass_api, getMajorList_api } from '@/apis';

const props = defineProps({
    modelValue: String,
});

const emit = defineEmits(['update:modelValue']);

const visible = ref(false);
const selectedGrade = ref('');
const selectedMajor = ref('');
const selectedClassNum = ref('');
const selectedClass = ref(props.modelValue);

const grades = ref([]);
const classes = ref([]);
const majors = ref([]);

// 获取数据
const getStuGrade = async () => {
    const res = await getStuGrade_api();
    grades.value = res.rows;
};

const getStuClass = async () => {
    const res = await getStuClass_api();
    classes.value = res.rows;
};

const getMajorList = async () => {
    const res = await getMajorList_api();
    majors.value = res.data.slice(4);
};

// 显示弹窗
const showModal = () => {
    visible.value = true;
};

// 确认选择
const handleOk = () => {
    if (!selectedGrade.value || !selectedMajor.value || !selectedClassNum.value) {
        message.warning('请完成所有选项选择');
        return;
    }

    const fullClass = `${selectedGrade.value}${selectedMajor.value}${selectedClassNum.value}`;
    selectedClass.value = fullClass;
    emit('update:modelValue', fullClass);
    visible.value = false;

    // 清空选择
    selectedGrade.value = '';
    selectedMajor.value = '';
    selectedClassNum.value = '';
};

onMounted(() => {
    getStuGrade();
    getStuClass();
    getMajorList();
});

// 监听外部值变化
watch(() => props.modelValue, (newVal) => {
    selectedClass.value = newVal;
});
</script>

<style lang="less" scoped>
.class-select-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;

    .ant-input {
        flex: 1;
    }

    .ant-btn-link {
        padding: 4px 0;
        height: 32px;
        line-height: 24px;
        white-space: nowrap;

        &:hover {
            color: #1890ff;
        }
    }
}

:deep(.ant-input-disabled) {
    color: rgba(0, 0, 0, 0.85);
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 1;
}
</style>